<template>
  <div>
    <h1>toRef</h1>
    <h2>obj.name</h2>
    <h1>{{ obj.name }}</h1>
    <h2>ref包裹的name1</h2>
    <h2>{{ name1 }}</h2>
    <input type="text" v-model="name1"><br>
    <h2>toRef包裹的name2</h2>
    <h2>{{ name2 }}</h2>
    <input type="text" v-model="name2"><br>
    <button @click="changeName">改变name</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRef } from 'vue'

export default defineComponent({
  setup() {
    const obj = reactive({
      name: "tom",
      age: 20
    })

    //将name变为ref对象   当前的name 是字符串，不是响应式的

    //一、常规方法：将基本数据类型加上ref()包裹，变成响应式
    //ref 得到的值，是独立的是拷贝了一份新数据，在堆中是独立的，跟obj没关系。
    const name1 = ref(obj.name);

    //二、 toRef
    //toRef的值，同 源响应对象上的值 是同一个空间，改动其中一个数据，另外一个也会改动。，
    //toRef作用：将响应式对象上的某一个属性，变成ref对象。
    //参数一：响应式对象；  参数二：响应式对象中的key值，key值永远是字符串
    const name2 = toRef(obj, 'name');

    //查看这两个ref对象有什么区别
    function changeName() {
      // name1.value += 111;
      name2.value += 222;
    }
    return {
      obj,
      name1,
      name2,
      changeName
    }
  }
})
/*
  ref
  1、ref对象，将基本数据类型进行包裹，响应式数据；
  2、ref获取Dom元素
        ref获取单个dom元素
        ref获取子组件对象
        ref获取v-for遍历的DOM
  3、toRefs
  4、toRef
  5、customRef
*/
</script>

<style scoped>

</style>